<template>
  <div class="pageMain">
    <div class="headTitle">
      {{ $t('pl.searchR') }}
    </div>
    <div class="resultsMain">
      <!--      头部-->
      <div class="topHead">
        <div class="left">
          <span>{{ $t('pl.searchC') }}&#x3000;</span>
          <span>“{{ $route.query.value }}”</span>
        </div>
        <div class="right">
          <img src="@/assets/searchResults/firstPage.png" alt="" @click="firstPage">
          <img src="@/assets/searchResults/prev.png" alt="" @click="prevPage">
          <span>{{ $t('pl.l1') }}&nbsp;{{currentPage}}&nbsp;{{ $t('pl.page') }}，{{ $t('pl.all') }}&nbsp;{{ pages }}&nbsp;{{ $t('pl.page') }}</span>

          <img src="@/assets/searchResults/next.png" alt="" @click="pageNext">
          <img src="@/assets/searchResults/endPage.png" alt="" @click="endPage">
        </div>
      </div>
      <!--      列表-->
      <div v-if="productList.length > 0" class="resultsList" >
        <div class="item" v-for="item in productList" @click="toDetail(item.id)">
          <v-hover v-slot=" {hover} ">
            <div class="product_list_img">
              <img style="width: 204px;height: 204px" :src="item.image"/>
              <v-img class="product_list_img_item" v-if="hover"
                     contain
                     width="64"
                     height="64"
                     src="@/assets/home/magnifier.png"
              ></v-img>
            </div>

          </v-hover>
          <div class="productName">{{ item.title }}</div>
        </div>
      </div>
      <!--      空内容-->
      <div v-else class="nodata">
        <img src="@/assets/searchResults/searchResultsNone.png">
        <div>{{ $t('pl.l2')}} “{{$route.query.value}}” {{ $t('pl.l3')}}</div>

      </div>
    </div>

  </div>
</template>


<script>
import {getProductArr, getProductList} from "@/api/product";

export default {
  name: 'productClass',
  data: () => ({
    productList: [],
    currentPage:1,
    pages: 1,
    dlist:[],
  }),
  watch:{
    "$route.query.value":{
      immediate: true,
      handler() {
        this.getProductClass()
      }
    }
  },
  computed:{
    pname(){
      return this.$route.query.name
    }
  },
  created() {
    getProductArr().then(res => {
      this.dlist = res.data
    }).catch(err => {

    })
  },
  methods: {
    getProductClass(){
      getProductList({
        pid:this.$route.query.id,
        page:this.currentPage,
        limit:10,
        search: this.$route.query.value
      }).then(res => {
        if (res.data.total < 10){
          this.pages = 1
          this.currentPage = 1
        } else {
          if ((res.data.total % 10) == 0){
            this.pages = (res.data.total / 10)
          } else {
            this.pages =  Math.ceil((res.data.total / 10))
          }
        }
        this.productList = res.data.data
      })
    },
    firstPage(){
      this.currentPage = 1
      this.getProductClass()
    },
    prevPage(){
      if (this.currentPage > 1){
        this.currentPage = this.currentPage - 1
        this.getProductClass()
      } else{
        return
      }
    },
    pageNext(){
      if (this.currentPage < this.pages){
        this.currentPage = this.currentPage + 1
        this.getProductClass()
      } else{
        return
      }
    },
    endPage(){
      this.currentPage = this.pages
      this.getProductClass()
    },
    toDetail(id){
      this.$router.push({
        name:"productDetails",
        query:{
          id:id
        }
      },()=>{})
    }
  },
}
</script>
<style scoped lang="less">
.pageMain {
  width: 1200px;
  margin: 0 auto;
}
.headTitle{

  font-size: 28px;
  color: #00A3E6;
  font-weight: 400;
  margin-top: 50px;
  margin-bottom: 20px;
}

.select{
  margin-top: 30px;
  text-align: right;
  /deep/ .el-form{
    .el-form-item{

    }
  }
  /deep/ .select_i{
    width: 140px !important;
    .el-input{
      .el-input__inner{
        background-color: #F6F6F6 !important;
        border: 1px solid #D8D8D8 !important;
        font-size: 14px;
      }
      .el-input__inner::placeholder {
        color: #666666 !important;

      }
    }
  }
}

.resultsMain {
  width: 100%;
  border: 1px solid #F6F6F6;
  margin: 0 auto 100px auto;
  box-sizing: border-box;

  .topHead {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background-color: #F6F6F6;

    .left {
      font-size: 16px;

      span:nth-child(1) {
        color: #666666;
      }

      span:nth-child(2) {
        color: #00A3E6;
      }
    }

    .right {
      color: #666666;
      font-size: 16px;

      span {
        margin-right: 10px;
      }

      img {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }
  }

  .resultsList {
    padding: 0px 30px 30px 30px;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 204px;
      margin-right: 29px;
      margin-top: 30px;
      cursor: pointer;
      img{
        width: 204px;
        height: 204px;
      }
      .productName{
        margin-top: 15px;
        color: #666666;
        font-size: 14px;
        text-align: center;
        width: 100%;
      }
      &:nth-child(5n) {
        margin-right: 0;
      }
      .product_list_img {
        position: relative;

        .product_list_img_item {
          position: absolute;
          top: 70px;
          left: 70px;
        }
      }
    }
  }

  .nodata{
    display: flex;
    justify-content: center;
    margin:30px 0;
    flex-wrap: wrap;
    img{
      width: 267px;
    }
    div{
      text-align: center;
      width: 100%;
      color: #666666;
      font-size: 16px;
      margin-top: 30px;
    }
  }
}


</style>